import React from 'react';
import { Collapse, Icon, Table, message, Tooltip, Popconfirm } from 'antd';
import { useRequest } from '@/hooks';
import { DividerContainer } from '@/molecules';
import authHelper from '@/utils/auth/helper';
import { Icon as CustomIcon, Link } from '../../../components';
import AccountModal from '../AccountModal';
import { deleteAccount } from '../../service';
import styles from './index.less';

const { checkCode } = authHelper;
const { Panel } = Collapse;

const AccountTable = ({ data, channelCode, loginLink, onRefresh, ...rest }) => {
    // 删除账号
    const { run: handleDelete } = useRequest(value => deleteAccount(value), {
        manual: true,
        onSuccess: result => {
            const { code, msg } = result;
            if (code === 10000) {
                message.success('操作成功');
                if (onRefresh) {
                    onRefresh(2);
                }
            } else {
                message.error(msg);
            }
        }
    });

    const columns = [
        {
            title: '账号',
            width: 150,
            ellipsis: true,
            dataIndex: 'channelAccount'
        },
        {
            title: '姓名',
            width: 120,
            ellipsis: true,
            dataIndex: 'accountName'
        },
        {
            title: '状态',
            dataIndex: 'accountStatus',
            width: 80,
            filters: [
                { text: '在线', value: 1 },
                { text: '离线', value: 0 }
            ],
            onFilter: (value, record) => record.accountStatus === value,
            render: (text, record) => {
                if (record?.accountStatus === 1) {
                    return <span style={{ color: '#44c69d' }}>在线</span>;
                }
                return '离线';
            }
        },
        {
            title: '接收简历邮箱',
            dataIndex: 'accountReceiveMailList',
            ellipsis: true,
            render: (text, record) => {
                if (record?.accountReceiveMails) {
                    const arr = record.accountReceiveMails.split(',');
                    if (arr.length > 1) {
                        return (
                            <>
                                <Tooltip title={arr.join('\n')}>
                                    <Link to=" " onClick={e => e.preventDefault()}>
                                        {arr.length}
                                    </Link>
                                </Tooltip>
                                个
                            </>
                        );
                    }
                    return record?.accountReceiveMails;
                }
                return '';
            }
        },
        {
            title: '授权用户',
            dataIndex: 'authEmployeeNames',
            ellipsis: true,
            render: text => text.replace(/,/g, '、')
        },
        {
            title: '操作',
            key: 'action',
            width: 130,
            render: (text, record) => (
                <DividerContainer>
                    {checkCode('office:recruitment:setting:channel:account:update') && (
                        <CustomIcon
                            title="登录"
                            disabled={record?.accountStatus === 1}
                            type="process_common_hyperlink_icon"
                            onClick={() => {
                                if (loginLink) {
                                    window.open(loginLink, '_blank');
                                }
                            }}
                        />
                    )}
                    {checkCode('office:recruitment:setting:channel:account:update') && (
                        <AccountModal data={record} channelCode={channelCode} onSuccess={onRefresh}>
                            <CustomIcon title="编辑" type="listfunction_edit_icon_default" onClick={() => {}} />
                        </AccountModal>
                    )}
                    {checkCode('office:recruitment:setting:channel:account:delete') && (
                        <Popconfirm
                            title="确定删除该账号吗？"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={() => handleDelete(record.id)}
                        >
                            <CustomIcon title="删除" type="listfunction_delete_icon_default" onClick={() => {}} />
                        </Popconfirm>
                    )}
                </DividerContainer>
            )
        }
    ];

    const getColumns = () => {
        const arr = [...columns];
        if (channelCode === 'bosszp') {
            arr.splice(3, 1);
        }
        return arr;
    };

    return (
        <Collapse
            className={styles.custom}
            bordered={false}
            expandIconPosition="right"
            expandIcon={({ isActive }) => <Icon type="up" rotate={isActive ? 0 : 180} />}
            {...rest}
        >
            <Panel header="账号详情" key="1">
                <Table
                    rowKey="id"
                    columns={getColumns()}
                    dataSource={data}
                    pagination={false}
                    style={{ borderTop: '1px solid #e8e8e8' }}
                    scroll={{ x: 800 }}
                />
            </Panel>
        </Collapse>
    );
};

export default AccountTable;
